<!DOCTYPE html>
<!--  引入thymeleaf标签库  这样，才能使用th:*形式的标签！ 通过${…}进行取值  链接表达式: @{…}  这种符号的【替换】，都是在【服务器端】完成的，如果没有服务器端去【解析】和【替换】这些【标记符号】，这些标记符号就真的只是普通字符串而已 -->
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>题目管理控制台</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../static/js/message/vue.js"></script>
    <!--  引入element组件库 -->
    <script src="../static/js/message/index.js"></script>
    <!--  引入element样式 -->
    <link rel="stylesheet" href="../static/css/message/index.css">
    <!--  引入axios组件 -->
    <script src="../static/js/message/axios.min.js"></script>
    <!--  引入自定义样式 -->
    <link rel="stylesheet" href="../static/css/ques/01.css">

</head>


<body>


<div id="alice">

    题目管理
    <el-divider></el-divider>

    <el-button @click="handleClick()" type="success" size="small">新增题目</el-button>
    <!--<el-button size="small" >批量导入</el-button>-->

    <div id="crazy_hat">

        <div class="div_out">

            <div class="span">
                <span class="star">*</span> 题目ID：
                <div class="div_inner">
                    <el-input v-model="id" id="qid" placeholder="请输入题目ID"></el-input>
                </div>
            </div>


            <div class="span">
                <span class="star">*</span> 题目内容：
                <div class="div_inner">
                    <el-input v-model="quesContent" id="quesContent" placeholder="请输入题目内容"></el-input>
                </div>
            </div>


     <!--       <div class="span">
                <span class="star">*</span> 试卷类型：

                <div class="div_inner">

                    <el-select v-model="test_type_selectedID" placeholder="选择试卷类型"  @change="get_test_typeID" size="small">
                        <el-option v-for="item in test_type" :key="item.id" :label="item.name" :value="item.id">
                            {{item.name}}
                        </el-option>
                    </el-select>
                </div>
            </div>-->



            <div class="span">
                <el-button type="success" size="small" @click="getData">查询</el-button>
            </div>

            <div class="span">
                <el-button  size="small" @click="reset">重置</el-button>
            </div>

            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        label="全选"
                        @selection-change="handleSelectionChange">
                    <el-table-column  type="selection" width="55"></el-table-column>
                    <el-table-column type="index" width="50" ></el-table-column>
                    <el-table-column prop="id" label="题目ID" align="center" >
                    </el-table-column>
                    <el-table-column prop="quesType.name" label="题型" align="center"  sortable>
                    </el-table-column>
                    <el-table-column prop="quesContent" label="题干内容" align="center" >
                    </el-table-column>

                    <el-table-column prop="difficulty" label="难度" align="center"  sortable>
                    </el-table-column>

                    <el-table-column prop="pointValue" label="分值" align="center"  sortable>
                    </el-table-column>
                    <el-table-column prop="testBean.createTime" label="编辑时间" align="center"  sortable>
                    </el-table-column>
                    <el-table-column prop="doneNums" label="已做次数" align="center"  sortable>
                    </el-table-column>

                    <el-table-column fixed="right" prop="manager" label="操作" align="center" >
                        <template slot-scope="scope">
                            <el-button @click="edit" type="text" size="mini" >编辑</el-button>
                            <el-button @click="del(scope.row,scope.$index)" type="text"  size="small">删除</el-button>
                        </template>
                    </el-table-column>


                </el-table>
            </template>

            <!--放置对话框/模态框-->


            <el-dialog
                    title="修改题目数据"
                    :visible.sync="isVisible"
                    width="30%"
                    :before-close="handleClose">


                <div class="div_out">
                    <span class="star">*</span> 题干内容：
                    <div class="div_inner">
                        <el-input v-model="re_quesContent" placeholder="请输入内容" ></el-input>
                    </div>
                </div>

                <div class="div_out">
                    <span class="star">*</span> 分值：
                    <div class="div_inner">
                        <el-input v-model="re_pointValue" placeholder="请输入分值" ></el-input>
                    </div>
                </div>

                <div class="div_out">
                    <span class="star">*</span> 难度：
                    <div class="div_inner">
                        <el-input v-model="re_difficulty" placeholder="请输入难度" ></el-input>
                    </div>
                </div>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="isVisible = false">取 消</el-button>
                    <el-button type="primary" @click="alice">确 定</el-button>
              </span>
            </el-dialog>

        </div>

    </div>

</div>











<!--  引入自定义js -->
<script src="../static/js/ques/01.js" ></script>

</body>
</html>